<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <title>图谱关系</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/neo4jd3.min.css">

    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="lib/element-ui/lib/theme-chalk/index.css">


    <style>
        body,
        html {
            height: 100%;
            margin: 0; /* 清除默认外边距 */
            padding: 0; /* 清除默认内边距 */
        }
        #app{
            height: 100%;
        }
        .content-neo {
            display: flex; /* 使用Flex布局 */
            width: 100%; /* 让容器宽度充满整个页面 */
            height: 100%;
        }

        #left-tree-id {
            width: 30%; /* 左侧元素宽度占% */
            height: 100%;
            overflow-y: auto;
            overflow-x: auto;
        }

        #neo4jd3 {
            flex-grow: 1; /* 自动填充剩余空间 */
            height: 100%;
            overflow-y: hidden;
        }
        .neo4jd3-graph{
            border-radius: 0;
            border-top: 0;
        }
        .el-tree-node__label{
            font-size: 12px;
        }
        /** 鼠标放到tree，修改背景色 */
        .el-tree-node__content:hover{
            background-color: rgba(125, 168, 245, 0.4);
        }
        .content-right{
            width: 100%;
            height: 100%;
        }
        .search{
            height: 10%;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="content-neo">
        <div id="left-tree-id">
            <el-tree
                    ref="leftTreeRef"
                    :data="leftTreeData"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :default-checked-keys="leftTreeCheckedKeys2"
                    @check="handleCheckChange"
                    :props="defaultProps">
            </el-tree>
        </div>
        <div class="content-right">
<!--            <div class="search"><el-input placeholder="请输入"></el-input></div>-->
            <div id="neo4jd3"></div>
        </div>
    </div>
</div>




<!-- Scripts -->
<script src="js/d3.js"></script>
<script src="js/neo4jd3.js"></script>
<script src="lib/vue/vue.js"></script>
<script src="lib/element-ui/lib/index.js"></script>
<script src="js/index.js"></script>

</body>
</html>
